import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:yyshort/common/model/recommend_list_model.dart';

class RecommendWidgetOne extends StatelessWidget {
  final RecommendModel? recommendModel;
  final ValueChanged<RecommendVideo>? onPlayTap;

  const RecommendWidgetOne({
    super.key,
    required this.recommendModel,
    this.onPlayTap,
  });

  @override
  Widget build(BuildContext context) {
    // 如果没有推荐视频数据，显示空容器
    if (recommendModel?.recommendVideos == null) {
      return Container();
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标题部分
        ListTile(
          title: Text(
            recommendModel?.name ?? "Discover your inner beauty", // 默认文本
            style: TextStyle(
              // 字体设置
              fontFamily: "PingFangSC-Semibold", // 苹方半粗体
              fontWeight: FontWeight.w600, // 字重 600
              fontSize: 19, // 字体大小 19pt
              // 颜色设置
              color: Color(0xFFFFFFFF), // 白色 #FFFFFF
              // 文本间距设置
              letterSpacing: 0, // 字间距 0
              height: 1.0, // 行高 19pt (与字体大小相同)
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis, // 超出部分显示省略号
            // 确保文本不换行，保持单行显示
          ),

          onTap: () {
            print("Tapped on recommend item ${recommendModel!.name}");
          },
        ),
        // Divider(),
        // 横向滚动内容区域
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(children: _buildContentWidgets()),
        ),
      ],
    );
  }

  // 样式：1-滚动带播放按钮 2-普通滚动 3-书本双排滚动 4-带描述双排滚动 5-卡片滚动
  List<Widget> _buildContentWidgets() {
    final style = recommendModel?.style ?? 0;
    // style=3和4使用分组布局，style=5使用卡片布局
    if ([3, 4].contains(style)) {
      return _buildColumnGrouped(recommendModel!.recommendVideos!);
    } else if (style == 5) {
      // 新增style=5的判断
      return recommendModel!.recommendVideos!.map<Widget>((item) {
        return _buildCardItem(item);
      }).toList();
    } else {
      // style=1、2使用基础布局
      return recommendModel!.recommendVideos!.map<Widget>((item) {
        return createBaseView(item);
      }).toList();
    }
  }

  // 构建分组列视图（适用于style=3和4）
  List<Widget> _buildColumnGrouped(List<RecommendVideo> videos) {
    List<Widget> columns = [];
    final style = recommendModel?.style ?? 0;

    for (int i = 0; i < videos.length; i += 2) {
      List<Widget> columnChildren = [];

      // 根据不同style使用不同的单项组件
      if (style == 3) {
        // style=3使用createBaseView
        columnChildren.add(createBaseView(videos[i]));
      } else {
        // style=4使用_buildGroupedItem
        columnChildren.add(_buildGroupedItem(videos[i]));
      }

      // 添加第二个元素（如果存在）
      if (i + 1 < videos.length) {
        columnChildren.add(SizedBox(height: 10.h));
        if (style == 3) {
          columnChildren.add(createBaseView(videos[i + 1]));
        } else {
          columnChildren.add(_buildGroupedItem(videos[i + 1]));
        }
      }

      columns.add(
        Padding(
          padding: EdgeInsets.only(right: 10.w),
          child: Column(children: columnChildren),
        ),
      );
    }

    return columns;
  }

  // 基础视图创建函数（适用于style=1、2、）
  Widget createBaseView(RecommendVideo item) {
    final style = recommendModel?.style ?? 0;

    // 获取对应style的宽高
    final dimensions = _getDimensionsByStyle(recommendModel?.style ?? 0);
    final width = dimensions[0];
    final height = dimensions[1];

    return Container(
      width: width,
      height: height,
      margin: EdgeInsets.symmetric(horizontal: 5.w),
      child: InkWell(
        onTap: () => _onItemTapped(item),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: switch (style) {
              1 => BorderRadius.circular(9.r),
              2 => BorderRadius.circular(14.r),
              3 => BorderRadius.circular(8.r),
              _ => BorderRadius.zero, // 默认值，当 style 不匹配以上任何情况时使用
            },

            //  () {
            //   if (recommendModel?.style == 1) {
            //     return
            //   } else if (recommendModel?.style == 2) {
            //     return BorderRadius.circular(14.r);
            //   }
            //   // 可以添加默认值，当style不是1或2时使用
            //   return // 或者其他默认圆角值
            // }(),
            color: style == 3 ? Colors.white : Colors.black,
            boxShadow: [
              BoxShadow(
                // ignore: deprecated_member_use
                color: Colors.black.withOpacity(0.15),
                offset: Offset(0, 4.h),
                blurRadius: 12.r,
              ),
            ],
          ),
          child: ClipRRect(
            // borderRadius: () {
            //   if (recommendModel?.style == 1) {
            //     return BorderRadius.circular(9.r);
            //   } else if (recommendModel?.style == 2) {
            //     return BorderRadius.circular(14.r);
            //   }
            //   // 可以添加默认值，当style不是1或2时使用
            //   return BorderRadius.zero; // 或者其他默认圆角值
            // }(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 图片 + 播放按钮
                check_buildImageContainer(item),
                // 标题文本
                _buildTitleWidget(item),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // ignore: non_constant_identifier_names
  Widget check_buildImageContainer(RecommendVideo item) {
    int style = recommendModel?.style as int;

    if (style == 1) {
      return _buildImageContainer(item, 164.5.w, 128.5.h);
    } else if (style == 2) {
      return _buildImageContainer(item, 146.5.w, 128.5.h);
    } else if (style == 3) {
      return _buildImageContainer(item, 102.w, 102.h);
    } else if (style == 4) {
      return _buildImageContainer(item, 146.5.w, 128.5.h);
    } else if (style == 5) {
      return _buildImageContainer(item, 146.5.w, 128.5.h);
    } else {
      return Container();
    }
  }

  // 构建分组布局中的单个项（仅用于style=4）
  Widget _buildGroupedItem(RecommendVideo item) {
    // 获取style=4的宽高
    final dimensions = _getDimensionsByStyle(4);
    final width = dimensions[0];

    return Container(
      width: width,
      margin: EdgeInsets.symmetric(horizontal: 5.w),
      child: InkWell(
        onTap: () => _onItemTapped(item),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(18.r),
            color: Colors.black,
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.15),
                offset: Offset(0, 4.h),
                blurRadius: 12.r,
              ),
            ],
          ),
          child: ClipRRect(
            child: Container(
              color: Colors.black,
              padding: EdgeInsets.all((16 / 2).w),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 图片组件（164/2 = 82）
                  ClipRRect(
                    borderRadius: BorderRadius.circular(12), // 圆角半径可调整
                    child: CachedNetworkImage(
                      imageUrl: item.imgUrl ?? '',
                      width: (164 / 2).w,
                      height: (218 / 2).w,
                      fit: BoxFit.cover,
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    ),
                  ),
                  SizedBox(width: (27 / 2).w),

                  // 右侧文本区域
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 标题文本（字体大小30/2 = 15）
                        Text(
                          item.name ?? '',
                          style: TextStyle(
                            fontFamily: 'PingFangSC',
                            fontSize: (30 / 2).w,
                            color: Colors.white,
                            height: 1.2,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),

                        SizedBox(height: (16 / 2).w),

                        // 标签按钮（宽148/2=74，高32/2=16，圆角16/2=8）
                        Visibility(
                          visible: item.tags?.isNotEmpty ?? false
                              ? true
                              : false,
                          child: Row(
                            children: [
                              // 这里使用item的标签数据，如果有的话
                              Container(
                                width: (148 / 2).w,
                                height: (32 / 2).w,
                                decoration: BoxDecoration(
                                  color: const Color(0xFFFFB42C),
                                  borderRadius: BorderRadius.circular(
                                    (16 / 2).w,
                                  ),
                                ),
                                child: Center(
                                  child: Text(
                                    item.tags?.isNotEmpty ?? false
                                        ? item.tags![0]
                                        : 'Tag1',
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: (16 / 2).w,
                                      fontWeight: FontWeight.w500,
                                    ),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ),

                              SizedBox(width: (10 / 2).w),

                              // 第二个标签
                              if ((item.tags?.length ?? 0) > 1)
                                Container(
                                  width: (148 / 2).w,
                                  height: (32 / 2).w,
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFFFB42C),
                                    borderRadius: BorderRadius.circular(
                                      (16 / 2).w,
                                    ),
                                  ),
                                  child: Center(
                                    child: Text(
                                      item.tags![1],
                                      style: TextStyle(
                                        color: Colors.black,
                                        fontSize: (16 / 2).w,
                                        fontWeight: FontWeight.w500,
                                      ),
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                ),
                            ],
                          ),
                        ),

                        SizedBox(height: (16 / 2).w),

                        // 描述文本（字体大小24/2=12，行高28/2=14）
                        Text(
                          item.description ?? '',
                          style: TextStyle(
                            fontFamily: 'PingFangSC-Regular',
                            fontWeight: FontWeight.w400,
                            fontSize: (24 / 2).w,
                            color: Colors.white,
                            letterSpacing: 0,
                            height: (28 / 2) / (24 / 2), // 保持行高比例
                          ),
                          softWrap: true,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 为style=5创建的卡片式布局组件
  // 为style=5创建的卡片式布局组件（深色主题版）
  Widget _buildCardItem(RecommendVideo item) {
    // 获取style=5的宽高（确保这个高度足够容纳内容）
    final dimensions = _getDimensionsByStyle(5);
    final width = dimensions[0];
    final height = dimensions[1];
    final suofang = ScreenUtil().screenWidth <= 375 ? (143.w / width) : 1.0;

    return Container(
      width: width,
      height: height,
      margin: EdgeInsets.symmetric(horizontal: 0.w),
      child: InkWell(
        onTap: () => _onItemTapped(item),
        child: Card(
          color: const Color(0xFF2D2D2D),
          elevation: 6,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.r),
          ),
          child: Padding(
            padding: EdgeInsets.all(15.w * suofang),
            // 核心修复：用 SingleChildScrollView 包裹 Column 防止溢出
            child: SingleChildScrollView(
              physics: const NeverScrollableScrollPhysics(), // 禁止内部滚动，仅防溢出
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min, // 让 Column 高度自适应内容
                children: [
                  // 标题文本
                  Text(
                    item.name ?? '',
                    style: TextStyle(
                      color: const Color(0xFFFFFFFF),
                      fontSize: 14.sp * suofang,
                      fontWeight: FontWeight.w700,
                      fontFamily: 'PingFangSC',
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(height: 10.w * suofang),

                  // 图片区域：使用 Flexible 适配剩余空间
                  Flexible(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.r),
                      child: CachedNetworkImage(
                        imageUrl: item.imgUrl ?? '',
                        // 动态高度：基于父容器高度的比例（避免硬编码）
                        height: height * (175.h / height), // 占父容器高度的45%
                        width: width * suofang, // 宽度充满父容器
                        fit: BoxFit.cover,
                        errorWidget: (context, url, error) =>
                            Icon(Icons.error), // 错误时显示的组件
                      ),
                    ),
                  ),

                  SizedBox(height: 7.w * suofang),

                  // 描述文本：限制最大高度，修复行高
                  Text(
                    item.description ?? '',
                    style: TextStyle(
                      color: const Color(0xFFD0D0D0),
                      fontSize: 12 * suofang, // 使用 sp 适配字体大小
                      height: 1.2, // 正确写法：行高为字体大小的1.2倍
                      fontFamily: 'PingFangSC-Regular',
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),

                  SizedBox(height: 5.w * suofang),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 构建图片容器（包含播放按钮）
  Widget _buildImageContainer(
    RecommendVideo item,
    double width,
    double height,
  ) {
    return Stack(
      alignment: Alignment.center,
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(8), // 圆角半径可调整
          child: CachedNetworkImage(
            imageUrl: item.imgUrl ?? '',
            width: width,
            height: height,
            fit: BoxFit.cover,
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),

        // 仅在style=1时显示播放按钮
        Visibility(
          visible: recommendModel?.style == 1,
          child: Container(
            width: 58.w,
            height: 58.w,
            decoration: const BoxDecoration(
              color: Colors.white24,
              shape: BoxShape.circle,
            ),
            child: const Icon(Icons.play_arrow, color: Colors.white, size: 32),
          ),
        ),
      ],
    );
  }

  // 构建标题组件
  Widget _buildTitleWidget(RecommendVideo item) {
    final style = recommendModel?.style ?? 0;

    return Padding(
      padding: EdgeInsets.all(0.w),
      child: Text(
        item.name ?? '',
        maxLines: switch (style) {
          3 => 1,
          _ => 2, // 默认值，当 style 不匹配以上任何情况时使用
        },
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontFamily: 'PingFangSC',
          fontSize: switch (style) {
            1 => 15,
            2 => 14,
            3 => 13,
            _ => 14, // 默认值，当 style 不匹配以上任何情况时使用
          },
          color: style == 3 ? Colors.black : Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  // 处理点击事件
  void _onItemTapped(RecommendVideo item) {
    if (onPlayTap != null) {
      onPlayTap!(item);
    }
  }

  // 根据不同style获取宽高的辅助函数
  // 在_getDimensionsByStyle方法中添加style=5的宽高配置
  List<double> _getDimensionsByStyle(int style) {
    switch (style) {
      case 1:
        return [165.w, 182.h];
      case 2:
        return [147.w, 179.h];
      case 3:
        return [102.w, 126.h];
      case 4:
        return [310.w, 110.h];
      case 5: // 添加style=5的宽高配置
        return [175.w, 277.h];
      default:
        return [(329 / 2).w, (363 / 2).h];
    }
  }
}
